<template>
  <div class="detail">
    <div v-for="item in carStore.carList" :key="item.id" class="item">
      <div class="leftImg">
        <img :src="item.src" alt="" />
      </div>
      <div class="rightContent">
        <span style="font-size: 3.5vw">{{ item.name }}</span>
        <span
          >￥<b>{{ item.price * item.total }}</b></span
        >
        <van-stepper v-model="item.total" integer min="1" max="99" />
        <span class="del"
          ><b @click.prevent="carStore.delCarItem(item.id)">X</b></span
        >
      </div>
    </div>
    <div v-if="carStore.carList.length === 0" class="null">
      <img src="https://hzyczn.52br.net/images/h5/icon/null.png" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useCarStore } from '@/stores'
const carStore = useCarStore()
console.log(carStore.carList)
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  height: 40vh;
  padding-bottom: 2vw;
  position: fixed;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  background: #f7f7f7;
  .item {
    display: flex;
    width: 90%;
    margin: 0 auto;
    margin-top: 2vw;
    background: #fff;
    box-sizing: border-box;
    height: 10vw;
    border-radius: 2.7vw;
    align-items: center;
    padding-right: 1vw;

    .leftImg {
      // flex: 1;
      display: flex;
      align-items: center;
      padding-left: 2vw;
      img {
        width: 8vw;
        height: 8vw;
        border: 0.125vw solid #eee;
        border-radius: 2.75vw;
        padding: 0.5vw;
      }
    }
    .rightContent {
      flex: 3;
      display: flex;
      justify-content: space-between;
      padding: 3.5vw 0;
      width: 100%;
      text-align: left;
      .del {
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: center;
        b {
          width: 6vw;
          height: 6vw;
          border-radius: 3vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #eee;
          color: #fff;
        }
      }
      span {
        flex: 1;
        display: flex;
        align-items: center;
      }
      span:nth-child(1) {
        flex: 4;
        padding-left: 1vw;
        color: rgba(0, 0, 0, 0.87);
      }
      span:nth-child(2) {
        flex: 2;
        text-align: center;
        padding-right: 1vw;
      }
      p {
        font-size: 3.2vw;
        color: rgba(0, 0, 0, 0.54);
        margin-top: 1.25vw;
      }
      span {
        color: #d81e06;
        font-size: 1.375vw;
        b {
          font-weight: bold;
          font-size: 4vw;
        }
      }
      button {
        border: none;
        width: 20vw;
        height: 5.3333vw;
        border-radius: 2.5vw;
        font-size: 2.6667vw;
        background: #b14094;
        color: #fff;
      }
    }
  }
  .null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 50%;
    }
  }
}
</style>
